<template>
	<view class="but" :style="{ 
			width:width+'rpx',
			height:height+'rpx',
			'line-height': height+'rpx',
			background: bgColor === '' ? '#36abce': bgColor,
			color: color === '' ? '#f8f8f8': color
		}">
		
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'u-icon',
		props: {
			// 按钮宽度
			width: {
				type: [Number, String],
				default: null
			},
			// 按钮高度
			height: {
				type: [Number, String],
				default: null
			},
			// 按钮背景颜色 
			bgColor: {
				type: String,
				default: '#36abce'
			},
			// 字体颜色
			color: {
				type: String,
				default: '#FFFFFF'
			}
		}
	}
	
	
</script>

<style>
.but{
	width:650rpx;
	height:100rpx;
	border-radius:10rpx;
	margin: 32rpx auto;
	font-size: 32rpx;
	line-height: 100rpx;
	text-align: center;
}
</style>
